<!doctype html>
<html>
<head>

    <script type="text/javascript" src="select2.full.js"></script>
    <script type="text/javascript" src="prettify.min.js"></script>
    <link href="bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link href="select2.min.css" type="text/css" rel="stylesheet"/>


</head>

<body>

<div class="container">

    <section id="multiple" class="row">
        <div class="col-md-4">
            <h1>Multiple select boxes</h1>
            <p>
                <select class="js-example-basic-multiple js-states form-control" multiple="multiple"></select>
            </p>
        </div>

    </section>

</div>
<select class="js-source-states" style="display: none;">
    <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
    </optgroup>

</select>

<script type="text/javascript">
    var $states = $(".js-source-states");
    var statesOptions = $states.html();
    $states.remove();
    $(".js-states").append(statesOptions);
    $.fn.select2.amd.require(
            ["select2/core", "select2/utils", "select2/compat/matcher"],
            function () {
                var $basicMultiple = $(".js-example-basic-multiple");
                $basicMultiple.select2()
            });
</script>

</body>
</html>
